<template>
  <div>
    <div>
      时间范围
      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button :disabled="dis" type="primary" class="demand" @click="cx"
        >查询</el-button
      >
    </div>

    <el-card>
      <div class="marketing" id="marketing"></div>
    </el-card>
  </div>
</template>

<script>
import { getYYYYMMDD_HHMMSS, gettime } from "@/utils/utils";
import { ordertotal } from "../../../apis/order";
import * as echarts from "echarts";
export default {
  data() {
    return {
      dis: false,
      date: [],
      value1: "",
    };
  },
  mounted() {
    //   初始化echarts容器
    this.lsp = echarts.init(document.getElementById("marketing"));
  },
  methods: {
    //   点击发送请求
    cx() {
      this.dis = true;
      setTimeout(() => {
        this.dis = false;
      }, 3000);
      ordertotal({ date: JSON.stringify(this.date) }).then((res) => {
        //   循环遍历里面下单的时间
        let xData = res.data.data.map((obj) => gettime(obj.orderTime));

        // 循环遍历里面总金额
        let yData = res.data.data.map((obj) => obj.orderAmount);
        //    图表里面的数据
        this.lsp.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["订单柱", "订单折"],
          },
          xAxis: [
            {
              type: "category",
              data: xData,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "金额",
              min: 0,
              max: 1000,
              interval: 80,
              axisLabel: {
                formatter: "￥{value}",
              },
            },
            {
              type: "value",
              name: "金额",
              min: 0,
              max: 1000,
              interval: 80,
              axisLabel: {
                formatter: "{value}",
              },
            },
          ],
          series: [
            {
              name: "订单柱",
              type: "bar",
              data: yData,
            },
            {
              name: "订单折",
              type: "line",
              yAxisIndex: 1,
              data: yData,
            },
          ],
        });
      });
    },
  },
  created() {
    //   算往后推3年的时间
    let timenum = new Date().getTime() - 1000 * 60 * 60 * 24 * 365 * 3;
    // 设置一个默认值
    this.date = [
      getYYYYMMDD_HHMMSS(new Date(timenum)),
      getYYYYMMDD_HHMMSS(new Date()),
    ];
  },
};
</script>

<style lang="less" scoped>
.demand {
  text-align: center;
  width: 70px;
  height: 36px;
  line-height: 10px;
  margin-left: 15px;
  margin-bottom: 10px;
}
.marketing {
  height: 400px;
}
</style>